<script setup lang="ts">
import ModelAreaBox from "@/views/Student/UseModel/component/model-area-box.vue";
import { ref, watch } from 'vue';
import type { TreeProps } from 'ant-design-vue';
import BaseBarChart from "@/components/echart/base-bar-chart.vue";
import Parameter from "@/components/communal/Parameter/parameter.vue";

const treeData: TreeProps['treeData'] = [
  {
    title: '缺失值处理',
    key: '0',
    checkable: false,
    children: [
      {
        title: '删除缺失值',
        key: '0-0',
      },
      {
        title: '插入缺失值',
        key: '0-1',
        checkable: false,
        children: [
          {
            title: '线性插值',
            key: '0-1-0',
          },
          {
            title: '多项式插值',
            key: '0-1-1',
          },
          {
            title: '基于临近的差值',
            key: '0-1-2',
          },
        ],
      },
      {
        title: '填充缺失值',
        key: '0-2',
        checkable: false,
        children: [
          {
            title: '均值',
            key: '0-2-0',
          },
          {
            title: '中位数',
            key: '0-2-1',
          },
          {
            title: '众数',
            key: '0-2-2',
          },
        ]
      },
    ],
  },
  {
    title: '异常值处理',
    key: '1',
    checkable: false,
    children: [
      {
        title: '异常值删除',
        key: '1-0',
      },
      {
        title: '修剪法',
        key: '1-2',
      },
      {
        title: '平滑法',
        key: '1-3',
      },
      {
        title: '分箱法',
        key: '1-4',
      },
      {
        title: '替换法',
        key: '1-5',
      },
    ]
  },
  {
    title: '重复值处理',
    key: '2',
    checkable: false,
    children: [
      {
        title: '直接删除',
        key: '2-0',
      },
    ]
  },
  {
    title: '归一化处理',
    key: '3',
    checkable: false,
    children: [
      {
        title: 'min-max',
        key: '3-0',
      },
      {
        title: 'z-score',
        key: '3-1',
      },
    ]
  },
];
const expandedKeys = ref<string[]>(['0', '1']);
const selectedKeys = ref<string[]>(['0-0', '0-1']);
// 选中的值
const checkedKeys = ref<string[]>(['0-0', '0-1']);
watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys.value);
});
watch(selectedKeys, () => {
  console.log('selectedKeys', selectedKeys.value);
});
watch(checkedKeys, () => {
  console.log('checkedKeys', checkedKeys.value);
});
// 猜你想问
const guessValue = ref<Array<IOption>>([
  {
    label: '查看缺失值处理建议',
    value: '1'
  },
  {
    label: '查看异常值处理建议',
    value: '2'
  },
  {
    label: '查看重复值处理建议',
    value: '3'
  },
  {
    label: '总结奔驰数据处理流程',
    value: '4'
  },

])

// 表格数据显示
const tdValue = ref<boolean>(false)
const okTabelData = () => {
  tdValue.value = true
}
//
//  模型评估
let estimate = ref<boolean>(false)
const okEstimate = () => {
  estimate.value=true
}
// x轴名
let xAxis = ref<string[]>(['MSE','R2'])
let xData = ref<any[]>([0.72,0.28])
</script>

<template>
  <!-- 数据预处理 -->
  <model-area-box title="数据预处理">
    <a-row :gutter="16">
      <a-col :span="5">
        <a-tree
            v-model:expandedKeys="expandedKeys"
            v-model:selectedKeys="selectedKeys"
            v-model:checkedKeys="checkedKeys"
            checkable
            showLine
            :defaultExpandAll="true"
            :tree-data="treeData"
        >
          <template #title="{ title, key }">
            <span v-if="key === '0-1'" style="color: #1890ff">{{ title }}</span>
            <template v-else>{{ title }}</template>
          </template>
        </a-tree>
      </a-col>
      <a-col :span="19">
        <a-row :gutter="24" style="margin-bottom: 20px">
          <a-col :span="16">
            <div class="ai-recommend">
              <div class="recommend-bubble">
                我是小Linter,关于数据预处理的建议和方法<br>
                <span style="color: #1890ff;cursor: pointer">查看推荐原因</span>
              </div>
              <div class="recommend-bubble">123</div>
            </div>
          </a-col>
          <a-col :span="8" >
            <a-flex vertical justify="space-between" style="height: 100%">
              <div>
                <p>猜你想问：</p>
                <ul>
                  <li
                      style="color: #1890ff;cursor: pointer;text-decoration:underline;margin-bottom: 5px"
                      v-for="item in guessValue" :key="item.value"
                  >
                    {{ item.label }}
                  </li>
                </ul>
              </div>
              <a-button type="primary" size="large" style="width: 100%" @click="okTabelData">
                生成数据
              </a-button>
            </a-flex>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-table v-if="tdValue"></a-table>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </model-area-box>
  <!-- 模型参数调整 -->
  <model-area-box title="模型参数设置">
    <template #rightFooter>
      <a-button type="primary" @click="okEstimate">确认参数</a-button>
    </template>
    <Parameter type="线性回归">

    </Parameter>
  </model-area-box>
  <!-- 模型评估 -->
  <model-area-box title="模型评估" v-if="estimate">
    <a-row :gutter="24">
      <a-col :span="6"></a-col>
      <a-col :span="6">
        <BaseBarChart
            height="256px"
            width="auto"
            label-name="模型评估"
            :x-axis="xAxis"
            :x-data="xData"
            :show-background="false"
        ></BaseBarChart>
      </a-col>
    </a-row>
  </model-area-box>

</template>

<style scoped lang="scss">
.ai-recommend{
  position: relative;
  width: 100%;
  height: 324px;
  background: rgb(225, 243, 255);
  border-radius: 3px;
  padding: 10px;
  .recommend-bubble{
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    max-width: 80%;
    height: auto;
    margin-bottom: 5px;
  }
}
</style>